<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>elrowtest</title>
    <link rel="stylesheet" href="/lib/elementui/lib/theme-default/index.css"/>

    <!-- 引入组件库 -->
    <!-- 先引入 Vue -->
    <script src="/lib/vue/vue.js"></script>
    <script src="/lib/vue/vue-resource.min.js"></script>
    <script src="/lib/vue/vue-router.js"></script>
    <script src="/lib/elementui/lib/index.js"></script>
    <script src="/lib/jquery/jquery-3.2.1.min.js"></script>

</head>
<body>
<h1>123123123</h1>
<el-row>
    <el-col :span="24">
        <div class="grid-content bg-purple-dark"></div>
    </el-col>
</el-row>
<el-row id="test">
    <el-col :span="12">
        <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="12">
        <div class="grid-content bg-purple-light"></div>
    </el-col>
</el-row>
<el-row>
    <el-col :span="8">
        <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="8">
        <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col :span="8">
        <div class="grid-content bg-purple"></div>
    </el-col>
</el-row>
<el-row>
    <el-col :span="6">
        <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="6">
        <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col :span="6">
        <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="6">
        <div class="grid-content bg-purple-light"></div>
    </el-col>
</el-row>
<el-row>
    <el-col :span="4">
        <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="4">
        <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col :span="4">
        <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="4">
        <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col :span="4">
        <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="4">
        <div class="grid-content bg-purple-light"></div>
    </el-col>
</el-row>


<script>
    new Vue({
        el: '#test',
        data: ''
    });
</script>

</body>


<style>
    .el-row {
        margin-bottom: 20px;
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
</html>